<script setup>
import { getCategoryAPI2 } from "@/apis/category";
import { getBannerAPI } from "@/apis/home";
import { onMounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import GoodsItem from "../Home/components/GoodsItem.vue";
const route = useRoute();
const categoryData = ref({});
const bannerList = ref([]);
const getCategoryData = async (id = route.params.id) => {
  const res = await getCategoryAPI2(id);

  categoryData.value = res.result;
};
const getBannerList = async () => {
  const res = await getBannerAPI({ distributionSite: "2" });
  bannerList.value = res.result;
};
onMounted(() => {
  getCategoryData();
  getBannerList();
});
onBeforeRouteUpdate((to) => {
  getCategoryData(to.params.id);
});
</script>


<template>
  <div
    class="categoryContainer"
    style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap"
  >
    <div class="categoryMain" style="width: 1240px">
      <div class="topCategory" style="width: 100%; height: 40px">
        <div
          class="breadContainer"
          style="height: 100%; display: flex; align-items: center"
        >
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item> {{ categoryData.name }} </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="bannerContainer" style="width: 100%">
        <el-carousel height="450px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img style="width: 100%; height: 100%" :src="item.imgUrl" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div
      class="sub-list-container"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #ffffff;
      "
    >
      <div
        class="sub-list"
        style="margin-top: 30px; margin-bottom: 30px; width: 1240px"
      >
        <div
          class="sub-list-text"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            width: 100%;
            font-size: 30px;
          "
        >
          全部分类
        </div>
        <div
          class="sub-list-container"
          style="
            display: flex;
            width: 100%;
            height: 200px;
            padding: 20px 0 20px 0;
            justify-content: center;
          "
        >
          <div
            class="sub-list-item"
            v-for="item in categoryData.children"
            :key="item.id"
          >
            <router-link
              style="display: flex; flex-wrap: wrap; justify-content: center;"
              class="subCategoryText"
              :to="`/category/sub/${item.id}`"
              
            >
              <img style="height: 132.43px; width: 132.43px; " :src="item.picture" />
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  margin-bottom: 20px;
                  font-weight: 700;
                "
              >
                {{ item.name }}
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div
      class="mainContainer"
      v-for="item in categoryData.children"
      :key="item.id"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #ffffff;
        flex-wrap: wrap;
      "
    >
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 70px;
          width: 100%;
          font-size: 30px;
        "
      >
        {{ item.name }}
      </div>
      <div
        class="goodsItemContainer"
        style="height: 100%; width: 80%; display: flex; flex-wrap: wrap"
      >
        <div
          class="goodsItem"
          v-for="good in item.goods"
          :key="good.id"
          style="width: 20%; height: 50%; padding: 20px 30px 10px 30px"
        >
          <GoodsItem :goods="good"></GoodsItem>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sub-list-item {
  width: 13%;
  height: 100%;

  margin-left: 30px;
}
.sub-list-item:hover {
  color: #27ba9b;
}
.subCategoryText:hover {
  color: #27ba9b;
}
</style>